<template>
    <div class="search">
        <van-search v-model="keyword" shape="round" show-action background="#ff5454" placeholder="请输入搜索关键词">
            <template #action>
                <div @click="onClickButton">
                    <van-icon name="user" style="color: aliceblue;" size="25px" />
                </div>
            </template>
        </van-search>
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in images" :key="image">
                <img :src="image" class="img" />
            </van-swipe-item>
        </van-swipe>
        <van-notice-bar left-icon="volume-o" text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。" />
        <div class="menu">
            <div class="mu"
                style="height: 90%; border-radius: 18px; margin-left: 6px; margin-right: 6px; background-color: white;">
                <van-grid :column-num="5" :border="false" icon-size="35px">
                    <van-grid-item v-for="item in hotcategory" :key="item.title" :icon="item.img" :text="item.title" />
                </van-grid>
            </div>
        </div>
        <div class="ms">
            <van-row gutter="20">
                <van-col span="8"
                    style="font-size: 12px; font-weight: 700; color: white; margin-top: 3px;">华杉科技秒杀活动</van-col>
                <van-col span="13">
                    <van-icon name="clock-o" style="color: white; margin-top: 3px; float: left;" />
                    <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" style="color: rgb(243, 192, 192);" />
                </van-col>
                <van-col span="3"><van-icon name="share-o" style="color: white; padding-left: 10px;" /></van-col>
            </van-row>
            <van-grid :gutter="10" style="margin-top: 5px;">
                <van-image v-for="item in categoryms" :key="item.title" width="60" height="70" :src="item.img">
                    ￥{{ item.title }}
                </van-image>
            </van-grid>
        </div>
        <van-grid :gutter="10" :column-num="2" style="margin-bottom: 33px;">
            <van-grid-item v-for="item in productData" :to="{ name: 'moveShopDetail', query: { id : item.id } }">
                <van-image :src="item.img" />
                <span>{{ item.name }}</span>
                <div class="zb">
                    <img src="https://img12.360buyimg.com/img/s24x24_jfs/t1/99811/34/18036/1287/5e8dbca2E63de76d4/588b8392ae283444.png"
                        alt="" style="width: 0.6rem; height: 0.6rem;">
                    <span style="color: #ff2078; font-size: 10px;">15天最低价</span>
                </div>
                <div class="prices" style="color:#ff4142 ; padding-left: 0px;">￥{{ item.price }}</div>
            </van-grid-item>
        </van-grid>




    </div>
    <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item icon="cluster-o" :to="{name:'moveShopfl'}">分类</van-tabbar-item>
        <van-tabbar-item icon="cart-o">购物车</van-tabbar-item>
        <van-tabbar-item icon="setting-o" :to="{ name: 'home' }">个人中心</van-tabbar-item>
    </van-tabbar>
</template>
<script setup lang="ts">

import { onMounted, ref } from 'vue';
import { ProductApi } from '@/api';
const keyword = ref("")
const active = ref(0)
const productData = ref([] as any[])
const time = ref(30 * 60 * 60 * 1000);
const images = [
    'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/219271/31/42254/68380/664aae35F6b0610bc/734a1934e0815bd5.jpg',
    'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/94503/38/41458/106945/64eda760F3ce8c5f0/d322f889099124c1.png',
    'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/185262/24/44039/226601/66262593F57a8f786/c0a6520a418d7c9c.jpg'
];
//秒杀商品
const categoryms = ref([
    { img: 'https://m.360buyimg.com/seckillcms/jfs/t1/211535/26/43497/173748/664ee82cFca8289dc/504b37c7daac8540.jpg', title: '19.9' },
    { img: 'https://m.360buyimg.com/seckillcms/jfs/t1/211535/26/43497/173748/664ee82cFca8289dc/504b37c7daac8540.jpg', title: '19.9' },
    { img: 'https://m.360buyimg.com/seckillcms/jfs/t1/211535/26/43497/173748/664ee82cFca8289dc/504b37c7daac8540.jpg', title: '19.9' },
    { img: 'https://m.360buyimg.com/seckillcms/jfs/t1/211535/26/43497/173748/664ee82cFca8289dc/504b37c7daac8540.jpg', title: '19.9' },
    { img: 'https://m.360buyimg.com/seckillcms/jfs/t1/211535/26/43497/173748/664ee82cFca8289dc/504b37c7daac8540.jpg', title: '19.9' },




]
)

// 图标数组
const hotcategory = ref([
    { img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png', title: '华杉超市' },
    { img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/195186/28/35854/3469/64d4a1e5Fe388886e/3c6f65ecd0aba98b.png', title: '华杉美妆' },
    { img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/149144/13/37547/3299/64b11027F86659ec1/fade439ac90544b7.png', title: '华杉电器' },
    { img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/208529/13/35972/4081/6497ee53F4f8d38d9/c5267cb385f923fe.png', title: '充值中心' },
    { img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png', title: 'plus会员' }
])

//api接口函数
const CallProductApi = () => {
    ProductApi.select.call().then((res: any) => {
        // console.log(res);
        productData.value = res
        console.log(productData.value);
        productData.value = productData.value.slice(4)

    })
}

onMounted(() => {
    CallProductApi()
})

const onClickButton = () => {
    console.log("打印输出");

};
</script>
<style scoped>
* {
    margin: 0px;
    padding: 0px;
}

.ms {
    width: 100%;
    height: 7.5rem;
    background-color: #f73838;
    border-radius: 5px;
    margin-top: 5px;
}

.search {
    width: 100%;
    height: 200px;
    /* background: red; */
    background: linear-gradient(to bottom, #f73838, #f9e8e8);
}

.img {
    width: 100%;
    height: 200px;
}

.menu {
    width: 100%;
    height: 100px;
    background: linear-gradient(to bottom, #f9d9d9, #fcfafa);
}

.zb {
    width: 100%;
}

.zb img span {
    margin-left: 0px;
}

.prices {
    width: 100%;
    margin-left: 0px;
}
</style>